<template>
  <div class="custom-toggle-group">
    <button v-for="option in options" :key="option.value"
      :class="['toggle-btn', { active: modelValue === option.value }]" @click="handleToggle(option.value)">
      {{ option.label }}
    </button>
  </div>
</template>

<script setup lang="ts">
interface ToggleOption {
  value: string;
  label: string;
}

interface Props {
  modelValue: string;
  options: ToggleOption[];
}

interface Emits {
  (e: "update:modelValue", value: string): void;
  (e: "change", value: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const handleToggle = (value: string) => {
  emit("update:modelValue", value);
  emit("change", value);
};
</script>

<style scoped>
.custom-toggle-group {
  display: inline-flex;
  background: #f5f5f5;
  border-radius: 6px;
  padding: 2px;
  gap: 0;
}

.toggle-btn {
  padding: 6px 16px;
  border: none;
  background: transparent;
  color: #666;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  outline: none;
}

.toggle-btn:hover {
  color: #333;
}

.toggle-btn.active {
  background: #fff;
  color: #107082;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toggle-btn:first-child {
  margin-right: 1px;
}
</style>
